<template>
<div>
    <!-- 购物车 -->
    <table border="1">
        <th>---名字--</th>
        <th>---数量---</th>
        <th>---价格---</th>
        <tr v-for="(item,index) in tlist" :key="index">
            <td>{{item.text}}</td>
            
            <td>
                <button @click="minus(index,'-')">-</button>
                <input type="text" v-model="item.num">
                <button @click="minus(index,'+')">+</button>
                </td>
            <td>{{item.price}}</td>
        </tr>
    </table>
    总数量:{{totalCount(0)}}
    总价格:{{totalCount()}}
    




    <!-- <button @click="counter++">点我加1</button> -->
    <!-- {{counter}} -->
    <ul>
        <li v-for="(item,index) in tlist" :key="index" :class="{on:index%2==0,off:index%2!=0}">
            {{item.text}}
        </li>
    </ul>


    <div v-if="type ==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else>
        既不是A ，也不是B
    </div>
    <h2 v-if='ok'>hello vue</h2>
    <h2 v-show="ok">Hellow</h2>
    <div v-html="msg"></div>
    {{msg}}
    {{reverse_msg}}
</div>
   
</template>

<script>
export default {
    //定义数据
    data () {
        return {
            msg:'<h1>这是一个变量</h1>',
            counter:0,
            ok:true,
            type:'A',
            tlist:[{text:'水果',num:1,price:12},{text:'饮料',num:1,price:13},{text:'生鲜',num:1,price:14},{text:'零食',num:1,price:15}]
        }
    },
    //钩子方法
    mounted() {
        
    },
    //自定义方法
    methods: {
        //总价格计算
        //汇总数量
        totalCount(type){
            //默认价格
            let price=0
            //默认数量
            let total=0
            for(let i=0,le=this.tlist.length;i<le;i++){
                total += parseInt(this.tlist[i].num);
                price+=this.tlist[i].num*this.tlist[i].price
            }
            if(type==0){
                return total
            }else{
                return price
            }
           
        }, 

        //购物车加减法
		minus:function(index,type){
            if(type=='-'){
				if(this.tlist[index].num > 0){
				this.tlist[index].num--;
			    }
            }else{
                this.tlist[index].num++
            }

		},
        methods: {
            created() {
                
            },
        }

        
    },
    //计算属性
    computed:{
        //反转
        reverse_msg:function(){

            return this.msg.split('').reverse().join('')
        }
    },
    //监听属性
    watch:{
        counter:function(nval,oval){
            console.log('计数器由'+oval+'变成新的'+nval)
        }
    }

}
</script>

<style>
.on {background: skyblue;
    color: orangered
}
.off{background:palevioletred}

</style>
